<template>
	<view class="test">
		<u-form label-position="top" :model="form" ref="uForm">
			<u-form-item label="" prop="name">
				<u-input placeholder="请输入昵称" v-model="form.name" />
			</u-form-item>

		</u-form>
		<u-button ripple-bg-color="#fa84aa" shape="circle" :plain="true" :ripple="true" class="btn" type="error"
			@click="submit">提交</u-button>
		<!-- <u-button class="btn" type="error" @click="submit">提交</u-button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				form: {
					name: '',
					
				},
				rules: {
					name: [{
						required: true,
						message: '请输入昵称',
						trigger: ['blur', 'change']
					}],
					
				}
			};
		},
		methods: {
			async updateNickName(name) {

				},
			
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						let modifyNickname = this.form.name;
						// 发送修改昵称的请求
						
						
						// this.updateNickName(modifyNickname)
						
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>
<style lang="scss" scoped>
	.test {
		padding: 32rpx;
		.btn {
			margin-top: 20rpx;
			background: $my-primary;
		}

	}
</style>
